<script setup lang="ts">
import { onMounted, onUnmounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router';
import {
  requestSearchHotList,
  requestSearchSuggest,
  requestDefaultKeywords,
  requestSynthesizeSearchResult,
  requestGetSoundSource
} from '../../utils/axiosURL'
import useSearchHistory from "../../store/searchHistory";
import useSongURLStore from "../../store/songURL";
import { storeToRefs } from "pinia";

const songURLStore = useSongURLStore()
const { searchHisArr } = storeToRefs(useSearchHistory())
const searchHistory = useSearchHistory()
const router = useRouter()
// 存储搜索热门列表
const searchHotListData = ref<any>([])
// 搜索联想建议框的显示状态
let searchBoxShowState = ref<boolean>(false)
// 输入搜索的联想值
let IptValue = ref<string>('')
// 定时器
let timer = ref<any | null>(null)
// 存储搜索建议数据
let searchSuggestionData = ref<any>({})
// 存储默认关键字
let defaultKeywords = ref<string>('')
// 搜索历史
let searchHistoryArr = ref<any>(new Set())
let searchHistoryArr2 = ref<any>([])
// 存储猜你想搜数据
const bingoYousThinkSearch = ref<any>([])
// 换肤容器的显示状态
let skinChangeState = ref<boolean>(false)

onMounted(() => {
  requestSearchHotListFn()
  requestDefaultKeywordsFn()
})

// 请求搜索热搜榜(详细)
const requestSearchHotListFn = () => {
  requestSearchHotList().then(({ data }: any) => {
    searchHotListData.value = data
  }).catch(_ => { })
}
// 请求搜索建议
const requestSearchSuggestFn = () => {
  requestSearchSuggest(IptValue.value).then((data: any) => {
    searchSuggestionData.value = data.result
    if (searchHistoryArr.value.has(IptValue.value)) searchHistoryArr.value.delete(IptValue.value)
    searchHistoryArr2.value = [...searchHistoryArr.value.add(IptValue.value)]
    localStorage.setItem('searchHistory', JSON.stringify([...searchHistoryArr2.value]))
    searchHistory.updateSearchHisArr([...searchHistoryArr2.value])
  }).catch(err => { console.log(err) })
}
// 请求默认关键字
const requestDefaultKeywordsFn = () => {
  requestDefaultKeywords().then(({ data }: any) => {
    defaultKeywords.value = data.showKeyword
  }).catch(_ => { })
}
// 猜你想搜
const requestSynthesizeSearchResultFn = () => {
  requestSynthesizeSearchResult(IptValue.value, 1, 10, 0).then((data: any) => {
    bingoYousThinkSearch.value = data.result.songs
  }).catch(err => {
    console.log(err)
  })
}
watch(IptValue, () => {
  if (IptValue.value === '') return
  requestSearchSuggestFn()
  requestSynthesizeSearchResultFn()
})

const changeIptStateFn = () => searchBoxShowState.value = true
const inputFn = (e: any) => {
  clearTimeout(timer.value)
  timer.value = setTimeout(() => IptValue.value = e.target.value, 800)
}
// 高亮处理
// const searchHighlight = (value: string, keywords: string) => {
//   const Reg = new RegExp(keywords, 'i');
//   if (value) {
//     const res = value.replace(Reg, `<span v-html style="color: red;">${keywords}</span>`);
//     console.log(res)
//     return res;
//   }
// }
// 点击歌曲播放事件函数
const clickSongPlay = (id: number, name: string, singer: string, picUrl: string, duration: number, index: number) => {
  localStorage.setItem("playState", "false")
  songURLStore.playStateChange(false)
  requestGetSoundSource(id).then(({ data }: any) => {
    songURLStore.init(data[0].url, name, singer, picUrl, duration, index, id)
    localStorage.setItem('songInfomation', JSON.stringify(
      {
        songName: name,
        songUrl: data[0].url,
        singer,
        picUrl,
        duration,
        index,
        id
      }
    ))
  }).catch((err: any) => {
    console.log(err);
  })
}
const changeKeywordsFn = (name: string) => {
  searchHistory.updateKeyWords(name)
}
// 换肤事件处理函数
const changeThemeFn = (value: string) => {
  document.getElementsByTagName('body')[0].setAttribute('data-theme', value);
}

// 窗口最大化与最小化的切换值
const SwitchingMiniMax = ref(true)
// 窗口最小化
const winMini = () => myApi.winMini()
// 窗口最大化
const winMax = () => {
  myApi.winMax()
  SwitchingMiniMax.value = !SwitchingMiniMax.value
}
// 取消窗口最大化
const cancelMax = () => {
  myApi.cancelMaxWin()
  SwitchingMiniMax.value = !SwitchingMiniMax.value
}
// 关闭窗口
const closeWin = () => myApi.closedWin()
// 打开登录的渲染进程子窗口
const showLoginWin = () => {
  myApi.showLoginWins(true)
}
// 后退一步
const prevStep = () => router.go(-1)
// 前进一步
const nextStep = () => router.go(1)

window.addEventListener('click', () => {
  searchBoxShowState.value = false
  skinChangeState.value = false
})
onUnmounted(() => window.removeEventListener('click', () => { }))
</script>


<template>
  <div class="project_Header">
    <div class="left_Header">
      <div class="logo">
        <span class="iconfont icon-wangyiyunyinyuemusic1193417easyiconnet"></span>
      </div>
      <span class="title">网易云音乐</span>
    </div>
    <div class="right_Header">
      <div class="r_wrap">
        <div class="prevStep" @click="prevStep" title="后退">
          <span class="iconfont icon-jiantou_liebiaoxiangzuo"></span>
        </div>
        <div class="nextStep" @click="nextStep" title="前进">
          <span class="iconfont icon-jiantou_liebiaoxiangyou"></span>
        </div>
        <div class="search">
          <span class="iconfont icon-fangdajing"></span>
          <input type="text" :placeholder="defaultKeywords" :value="IptValue" @click.stop="changeIptStateFn"
            @input="inputFn">
        </div>
        <div class="know_Misic">
          <span class="iconfont icon-tinggeshiqu"></span>
        </div>
        <div class="searchSuggestionWrap" v-if="searchBoxShowState" :class="IptValue ? 'bigSearchSuggestionWrap' : ''">
          <div class="noSearchData" v-if="!IptValue">
            <div class="SearchHistory">
              <p class="historyText">
                <span>搜索历史</span>
                <span class="iconfont icon-icon"></span>
              </p>
              <div class="SearchHistoryItemWrap">
                <p class="item" v-for="item in searchHisArr?.reverse()" @click.stop="() => IptValue = item">{{ item }}</p>
              </div>
            </div>
            <div class="HotSearchRanking">
              <p class="HotSearchTitle">热搜榜</p>
              <ul>
                <li v-for="(item, index) in searchHotListData" @click="changeKeywordsFn(item.searchWord)">
                  <RouterLink :to="{ path: '/search', query: { keyword: item.searchWord } }">
                    <div class="index" :class="index <= 2 ? 'TopThree' : ''">{{ index + 1 }}</div>
                    <div class="infoWrap">
                      <p>
                        <span class="songName">{{ item.searchWord }}</span>
                        <span>{{ item.score }}</span>
                      </p>
                      <p v-if="item.content">{{ item.content }}</p>
                    </div>
                  </RouterLink>
                </li>
              </ul>
            </div>
          </div>
          <div class="searchSuggestion" v-else>
            <div class="BingoYouThinkSearch">
              <p class="BingoText">
                <span class="iconfont icon-fangdajing"></span>
                <span>猜你想搜</span>
              </p>
              <ul class="BingoYouThinkUl">
                <li class="BingoItem" v-for="item in bingoYousThinkSearch" @click="changeKeywordsFn(item.name)">
                  <RouterLink :to="{ path: '/search', query: { keyword: item.name } }">
                    {{ item.name }}-{{ item.ar[0].name }}
                  </RouterLink>
                </li>
              </ul>
            </div>
            <div class="songWrap" v-if="searchSuggestionData?.songs?.length">
              <p class="songText">
                <span class="iconfont icon-yinfu"></span>
                <span>单曲</span>
              </p>
              <ul class="songUL">
                <li class="songItem" v-for="(item, index) in searchSuggestionData?.songs"
                  @click="clickSongPlay(item.id, item.name, item.artists[0].name, item.artists[0].img1v1Url, item.duration, index)">
                  {{ item.name }}-{{ item.artists[0].name }}
                </li>
              </ul>
            </div>
            <div class="singerWrap" v-if="searchSuggestionData?.artists?.length">
              <p class="singerText">
                <span class="iconfont icon-geshou"></span>
                <span>歌手</span>
              </p>
              <ul class="singerUL">
                <li class="singerItem" v-for="item in searchSuggestionData?.artists">
                  <router-link :to="`/SingerDetail/${item.id}`">
                    {{ item.name }}
                  </router-link>
                </li>
              </ul>
            </div>
            <div class="albumWrap" v-if="searchSuggestionData?.albums?.length">
              <p class="albumText">
                <span class="iconfont icon-zhuanji"></span>
                <span>专辑</span>
              </p>
              <ul class="albumUL">
                <li class="albumItem" v-for="item in searchSuggestionData?.albums">
                  <RouterLink :to="{
                    path: `/AlbumDetail/${item.id}`,
                    query: { url: item.artist.picUrl, name: item.name, time: item.publishTime, singerName: item.artist.name }
                  }">
                    {{ item.name }}
                  </RouterLink>
                </li>
              </ul>
            </div>
            <div class="songListWrap" v-if="searchSuggestionData?.playlists?.length">
              <p class="songListText">
                <span class="iconfont icon-gedan"></span>
                <span>歌单</span>
              </p>
              <ul class="songListUL">
                <li class="songListItem" v-for="item in searchSuggestionData?.playlists">
                  <RouterLink :to="`/SongListDetail/${item.id}`">
                    {{ item.name }}
                  </RouterLink>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="l_wrap">
        <div class="userSetting">
          <div class="userImg"></div>
          <p class="login" @click="showLoginWin">
            未登录
            <span class="iconfont icon-xiasanjiaoxing"></span>
          </p>
          <span class="iconfont icon-pifu" @click.stop="() => skinChangeState = !skinChangeState"></span>
          <span class="iconfont icon-31shezhi"></span>
          <span class="iconfont icon-youjianxinjian"></span>
          <div class="SkinChangeWrap" v-if="skinChangeState">
            <div class="theme1" @click.stop="changeThemeFn('theme1')"></div>
            <div class="theme2" @click.stop="changeThemeFn('theme2')"></div>
            <div class="theme3" @click.stop="changeThemeFn('theme3')"></div>
            <div class="theme4" @click.stop="changeThemeFn('theme4')"></div>
            <div class="theme5" @click.stop="changeThemeFn('theme5')"></div>
            <div class="theme6" @click.stop="changeThemeFn('theme6')"></div>
            <div class="theme7" @click.stop="changeThemeFn('theme7')"></div>
            <div class="theme8" @click.stop="changeThemeFn('theme8')"></div>
            <div class="theme9" @click.stop="changeThemeFn('theme9')"></div>
            <div class="theme10" @click.stop="changeThemeFn('theme10')"></div>
            <div class="theme11" @click.stop="changeThemeFn('theme11')"></div>
            <div class="theme12" @click.stop="changeThemeFn('theme12')"></div>
            <div class="theme13" @click.stop="changeThemeFn('theme13')"></div>
            <div class="theme14" @click.stop="changeThemeFn('theme14')"></div>
            <div class="theme15" @click.stop="changeThemeFn('theme15')"></div>
            <div class="theme16" @click.stop="changeThemeFn('theme16')"></div>
            <div class="theme17" @click.stop="changeThemeFn('theme17')"></div>
            <div class="theme18" @click.stop="changeThemeFn('theme18')"></div>
            <div class="theme19" @click.stop="changeThemeFn('theme19')"></div>
            <div class="theme20" @click.stop="changeThemeFn('theme20')"></div>
          </div>
        </div>
        <div class="window_control">
          <span class="iconfont icon-zuixiaohua1"></span>
          <span class="iconfont icon-zuixiaohua" @click="winMini"></span>
          <span v-if="SwitchingMiniMax" class="iconfont icon-zuidahua" @click="winMax"></span>
          <span v-else class="iconfont icon-chuangkouhuanyuan" @click="cancelMax"></span>
          <span class="iconfont icon-guanbi" @click="closeWin"></span>
        </div>
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
@import "../../style/global/handle.scss";
.project_Header {
  z-index: 99;
  position: fixed;
  display: flex;
  width: 100vw;
  height: 60px;
  padding: 0 15px;
  box-sizing: border-box;
  font-family: $textFont;
  font-size: $font-size-sm;
  @include background_color('bk_color');
  -webkit-app-region: drag;

  .left_Header {
    display: flex;
    align-items: center;
    flex-basis: 200px;

    .logo {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 25px;
      height: 25px;
      background-color: #fff;
      border-radius: 50%;

      span {
        @include logo_color('logo_color');
      }
    }

    .title {
      font-size: $font-size-lg;
      @include color('color');
      margin-left: 10px;
    }
  }

  .right_Header {
    display: flex;
    flex: 1;

    .r_wrap {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-basis: 260px;
      -webkit-app-region: no-drag;

      .prevStep {
        @extend .prev_next;
      }

      .nextStep {
        @extend .prev_next;
      }

      .search {
        display: flex;
        align-items: center;
        width: 160px;
        height: 30px;
        padding: 0 10px;
        box-sizing: border-box;
        background-color: $bk-color1;
        border-radius: 25px;
        overflow: hidden;

        span {
          flex-basis: 18px;
          @include color('color');
        }

        input {
          outline: none;
          border: none;
          width: 120px;
          margin-left: 4px;
          background-color: transparent;
          @include color('color');

          &::-webkit-input-placeholder {
            @include color('color');
          }
        }
      }

      .know_Misic {
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        @include color('color');;
        background-color: $bk-color1;
        border-radius: 50%;
      }

      .searchSuggestionWrap {
        position: absolute;
        top: 65px;
        left: 0;
        width: 350px;
        height: auto;
        max-height: 75vh;
        background-color: $theme-white;
        overflow: auto;
        box-shadow: 0px 0px 8px 0px rgb(230, 230, 230);
        border-radius: 10px;
        transition: .4s;

        .noSearchData {
          width: 100%;

          .SearchHistory {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;

            .historyText {
              font-size: $font-size-sm;
              font-family: $activeTextFont;
              @include color('color');
              margin-bottom: 8px;

              .icon-icon {
                vertical-align: -2px;
              }

              &:hover {
                color: $font_main_color;
              }
            }

            .SearchHistoryItemWrap {
              display: flex;
              flex-wrap: wrap;
              width: 100%;

              .item {
                border-radius: 25px;
                padding: 0px 10px;
                text-align: center;
                height: 24px;
                line-height: 24px;
                font-size: $font-size-xs;
                margin: 0 10px 10px 0;
                background-color: $font_default_color;
                border: 1px solid $lineColor;

                &:hover {
                  background-color: rgb(242, 242, 242);
                }
              }
            }
          }

          .HotSearchRanking {
            width: 100%;
            padding-bottom: 20px;
            box-sizing: border-box;

            .HotSearchTitle {
              font-size: $font-size-sm;
              font-family: $activeTextFont;
              color: $font_second_color;
              margin-bottom: 8px;
              margin-left: 10px;
            }

            ul {
              li {
                height: 50px;
                padding-left: 15px;
                box-sizing: border-box;

                a {
                  display: flex;
                  align-items: center;
                  //display: block;
                  width: 100%;
                  height: 100%;

                  .index {
                    flex-basis: 30px;
                    font-size: $font-size-md;
                    color: $font_second_color;
                  }

                  .infoWrap {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    flex: 1;

                    >p {
                      font-size: $font-size-xs;
                      color: $font_second_color;

                      .songName {
                        @include color('color');
                        margin-right: 6px;
                      }
                    }
                  }

                  .TopThree {
                    color: $font_red_color;
                  }
                }

                &:hover {
                  background-color: rgb(242, 242, 242);
                }
              }
            }
          }
        }

        .searchSuggestion {
          width: 100%;
          padding-bottom: 30px;
          box-sizing: border-box;

          .BingoYouThinkSearch {
            width: 100%;

            .BingoText {
              font-size: $font-size-sm;
              font-family: $activeTextFont;
              color: $font_second_color;
              margin: 15px 0 0 10px;
              line-height: 35px;

              .icon-fangdajing {
                vertical-align: -2px;
                margin-right: 8px;
              }

              &:hover {
                color: $font_main_color;
              }
            }

            .BingoYouThinkUl {
              .BingoItem {
                line-height: 35px;
                font-size: $font-size-xs;
                padding-left: 35px;
                box-sizing: border-box;

                a {
                  display: block;
                  width: 100%;
                  height: 100%;
                }

                &:hover {
                  background-color: rgb(242, 242, 242);
                }
              }
            }
          }

          .songWrap {
            .songText {
              font-size: $font-size-sm;
              font-family: $activeTextFont;
              color: $font_second_color;
              margin: 0 0 0 10px;
              line-height: 35px;

              .icon-yinfu {
                vertical-align: -1px;
                margin-right: 8px;
              }

              &:hover {
                color: $font_main_color;
              }
            }

            .songUL {
              .songItem {
                line-height: 35px;
                font-size: $font-size-xs;
                padding-left: 35px;
                box-sizing: border-box;

                &:hover {
                  background-color: rgb(242, 242, 242);
                }
              }
            }
          }

          .singerWrap {
            .singerText {
              font-size: $font-size-sm;
              font-family: $activeTextFont;
              color: $font_second_color;
              margin: 0 0 0 10px;
              line-height: 35px;

              .icon-geshou {
                vertical-align: -2px;
                margin-right: 8px;
              }

              &:hover {
                color: $font_main_color;
              }
            }

            .singerUL {
              .singerItem {
                line-height: 35px;
                font-size: $font-size-xs;
                padding-left: 35px;
                box-sizing: border-box;

                a {
                  display: block;
                  width: 100%;
                  height: 100%;
                }

                &:hover {
                  background-color: rgb(242, 242, 242);
                }
              }
            }
          }

          .albumWrap {
            .albumText {
              font-size: $font-size-sm;
              font-family: $activeTextFont;
              color: $font_second_color;
              margin: 0 0 0 10px;
              line-height: 35px;

              .icon-zhuanji {
                vertical-align: 0px;
                margin-right: 8px;
              }

              &:hover {
                color: $font_main_color;
              }
            }

            .albumUL {
              .albumItem {
                line-height: 35px;
                font-size: $font-size-xs;
                padding-left: 35px;
                box-sizing: border-box;

                a {
                  display: block;
                  width: 100%;
                  height: 100%;
                }

                &:hover {
                  background-color: rgb(242, 242, 242);
                }
              }
            }
          }

          .songListWrap {
            .songListText {
              font-size: $font-size-sm;
              font-family: $activeTextFont;
              color: $font_second_color;
              margin: 0 0 0 10px;
              line-height: 35px;

              .icon-gedan {
                vertical-align: -2px;
                margin-right: 8px;
              }

              &:hover {
                color: $font_main_color;
              }
            }

            .songListUL {
              .songListItem {
                line-height: 35px;
                font-size: $font-size-xs;
                padding-left: 35px;
                box-sizing: border-box;

                a {
                  display: block;
                  width: 100%;
                  height: 100%;
                }

                &:hover {
                  background-color: rgb(242, 242, 242);
                }
              }
            }
          }
        }
      }

      .bigSearchSuggestionWrap {
        width: 400px !important;
      }
    }

    .l_wrap {
      display: flex;
      justify-content: flex-end;
      flex: 1;

      .window_control {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-basis: 150px;
        padding-left: 6px;
        -webkit-app-region: no-drag;

        span {
          @include color('color');
          transition: .2s;

          &:nth-child(1) {
            position: relative;

            &::after {
              content: "";
              position: absolute;
              top: 0px;
              left: -15px;
              width: 1px;
              height: 18px;
              background-color: $font_default_color;
            }
          }

          &:hover {
            color: $font_hover_color;
            cursor: pointer;
          }
        }
      }

      .userSetting {
        position: relative;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 211px;
        padding-right: 15px;
        -webkit-app-region: no-drag;

        .userImg {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin-right: 15px;
          background-color: ghostwhite;
        }

        .login {
          @include color('color');
          transition: .3s;

          span {
            font-size: $font-size-xs;
            margin: 0;
          }

          &:hover {
            color: $font_hover_color;
            cursor: pointer;
          }
        }

        &>span {
          @include color('color');
          margin-left: 15px;
          transition: .3s;
          font-size: $font-size-lg;

          &:hover {
            color: $font_hover_color;
            cursor: pointer;
          }
        }

        .SkinChangeWrap {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
          position: absolute;
          top: 60px;
          left: 0;
          background-color: #fff;
          width: 315px;
          height: 280px;
          padding: 10px;
          box-sizing: border-box;
          border-radius: 6px;
          box-shadow: 0px 0px 8px 0px rgb(230,230,230);

          >div{
            width: 50px;
            height: 50px;
            border-radius: 6px;
            margin: 0 8px 8px 0;
            background-color: #99a9bf;

            &:hover {
              cursor: pointer;
            }
          }


          .theme1 { background-color: $theme-red; }
          .theme2 { background-color: #8b7042; }
          .theme3 { background-color: #f3a694; }
          .theme4 { background-color: #f9d3e3; }
          .theme5 { background-color: #beb1aa; }
          .theme6 { background-color: #e5a84b; }
          .theme7 { background-color: #c0d695; }
          .theme8 { background-color: #ba5b49; }
          .theme9 { background-color: #f6bec8; }
          .theme10 { background-color: #fedc5e; }
          .theme11 { background-color: #9aa7b1; }
          .theme12 { background-color: #ebeee8; }
          .theme13 { background-color: #d2af9d; }
          .theme14 { background-color: #ea5514; }
          .theme15 { background-color: #98b6c2; }
          .theme16 { background-color: #3271ae; }
          .theme17 { background-color: #a6559d; }
          .theme18 { background-color: #bec2b3; }
          .theme19 { background-color: #d3ccd6; }
          .theme20 { background-color: #dcc7e1; }
        }
      }
    }
  }
}
</style>
